<!-- 小工具列表组件 -->
<template>
  <ul class="small-tools-list">
    <li
      class="tools-list-item"
      v-for="(item, index) in list"
      :key="item.name"
      v-html="item.html"
      :title="item.name"
      @click="iconClick(index)"
    ></li>
  </ul>
</template>

<script>
export default {
  name: '',
  props: {
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [
        {
          name: '搜索',
          angleOffset: 12,
          html: `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                   d="M930.81088 881.152l-196.40832-196.37248c49.24416-62.39744 78.69952-141.1328 78.69952-226.78016 0-202.40384-164.06528-366.464-366.48448-366.464S80.13312 255.60064 80.13312 457.99936c0 202.39872 164.06528 366.50496 366.48448 366.50496 85.65248 0 164.37248-29.45536 226.75968-78.69952l196.41856 196.40832c16.84992 16.81408 44.16512 16.81408 61.02016 0 16.85504-16.86016 16.85504-44.17536-0.00512-61.06112zM138.83904 458.06592c0-170.0096 137.8048-307.84 307.81952-307.84 170.0096 0 307.8656 137.83552 307.8656 307.84 0 81.92512-32.07168 156.30336-84.26496 211.45088a44.34432 44.34432 0 0 0-6.68672 5.46304 43.48928 43.48928 0 0 0-5.44768 6.67136c-55.15776 52.17792-129.5616 84.22912-211.46624 84.22912-170.0096-0.01024-307.81952-137.8048-307.81952-307.8144z m0 0"
                  ></path>
                </svg>`,
        },
        {
          name: '天气',
          angleOffset: 46,
          html: `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M489.585778 198.997333c18.204444 0 32.995556-14.677333 32.995555-32.768V61.155556A32.938667 32.938667 0 0 0 489.585778 28.444444c-18.204444 0-32.995556 14.677333-32.995556 32.768v105.073778c0 18.090667 14.791111 32.768 32.995556 32.768zM223.516444 289.393778a32.995556 32.995556 0 0 0 46.648889 0 32.711111 32.711111 0 0 0 0-46.421334L195.527111 168.732444a33.109333 33.109333 0 0 0-46.648889 0 32.711111 32.711111 0 0 0 0 46.421334l74.638222 74.24zM40.675556 540.444444h105.585777c18.204444 0 32.995556-14.734222 32.995556-32.824888a32.938667 32.938667 0 0 0-32.995556-32.824889H40.675556c-18.204444 0-32.995556 14.677333-32.995556 32.824889 0 18.090667 14.791111 32.824889 32.995556 32.824888zM799.857778 507.619556c0 18.090667 14.791111 32.824889 32.995555 32.824888h105.642667c18.204444 0 32.995556-14.734222 32.995556-32.824888a32.938667 32.938667 0 0 0-32.995556-32.824889h-105.585778c-18.204444 0-32.995556 14.677333-32.995555 32.824889zM732.330667 299.008a32.995556 32.995556 0 0 0 23.324444-9.614222l74.695111-74.24a32.711111 32.711111 0 0 0 0-46.421334 33.109333 33.109333 0 0 0-46.648889 0L709.006222 242.915556a32.711111 32.711111 0 0 0 23.324445 56.035555z"
                  ></path>
                  <path
                    d="M825.856 641.024a265.784889 265.784889 0 0 0-61.781333-147.456 270.677333 270.677333 0 0 0-80.611556-179.712 273.863111 273.863111 0 0 0-193.877333-79.587556c-73.386667 0-142.449778 28.444444-194.332445 80.099556a270.791111 270.791111 0 0 0-79.587555 215.608889 127.544889 127.544889 0 0 0-48.753778 32.768c-21.048889 22.755556-32.995556 52.053333-33.678222 82.887111a178.915556 178.915556 0 0 0-78.563556 51.598222 176.924444 176.924444 0 0 0-44.430222 117.248c0 97.962667 80.213333 177.664 178.801778 177.664h601.827555c46.990222 0 91.477333-18.375111 125.269334-51.768889a175.331556 175.331556 0 0 0 52.792889-125.496889c0-46.592-18.090667-90.624-50.915556-123.904a178.346667 178.346667 0 0 0-92.16-49.948444z m-336.213333-341.105778c55.523556 0 107.861333 21.504 147.228444 60.472889 19.968 19.797333 35.441778 42.837333 45.909333 68.039111a268.572444 268.572444 0 0 0-125.041777-30.549333 269.653333 269.653333 0 0 0-236.202667 139.093333 127.431111 127.431111 0 0 0-40.163556-13.539555 208.952889 208.952889 0 0 1-0.568888-15.815111c0-114.517333 93.639111-207.644444 208.782222-207.644445z m380.017777 593.92c-21.390222 21.048889-49.322667 32.654222-78.791111 32.654222H188.984889a112.526222 112.526222 0 0 1-112.753778-112.014222c0-55.751111 41.756444-103.424 97.166222-110.933333a32.995556 32.995556 0 0 0 27.534223-40.277333 61.383111 61.383111 0 0 1 14.563555-56.035556c10.410667-11.320889 24.576-18.204444 39.822222-19.569778h0.113778a61.610667 61.610667 0 0 1 53.191111 22.357334 33.052444 33.052444 0 0 0 56.888889-10.069334 203.207111 203.207111 0 0 1 192.227556-136.419555 202.695111 202.695111 0 0 1 149.447111 65.080889 200.760889 200.760889 0 0 1 53.873778 139.832888v1.251556a32.881778 32.881778 0 0 0 32.085333 33.450667 112.810667 112.810667 0 0 1 77.710222 33.735111 110.535111 110.535111 0 0 1-1.194667 156.899555z"
                  ></path>
                </svg>`,
        },
        {
          name: '个性化',
          angleOffset: 81,
          html: `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M698.132 963.584l-31.232-0.512H319.252c-18.432 0-39.936-1.024-56.32-11.776-10.24-6.144-23.552-19.456-29.696-35.328-5.12-13.312-4.608-28.16-4.608-41.984V522.24c-3.584 2.048-7.68 4.096-11.776 6.144-20.48 8.704-48.128 4.096-68.608-9.728-7.168-5.12-12.288-10.752-16.896-15.36l-10.752-10.752-37.376-35.84-20.48-20.48c-6.144-5.632-12.288-11.264-17.92-17.408l-6.144-6.144c-1.536-1.536-3.584-3.584-5.632-5.12-8.192-7.68-18.432-16.896-25.088-31.744-3.584-8.192-10.24-23.04-7.168-38.912 5.632-29.696 23.552-45.568 38.4-58.368 5.12-4.608 8.704-8.192 12.288-11.776 4.096-4.096 8.192-8.192 12.8-12.288l164.352-161.28c7.68-7.68 18.432-18.432 33.792-24.576l24.576-6.144s67.584-4.608 89.6 0c7.68 1.536 22.016 9.216 28.16 14.336 9.216 7.168 15.872 15.36 21.504 23.04l1.536 2.048c4.608 6.144 15.872 13.824 26.112 17.92 11.776 5.12 25.6 8.192 41.984 11.264l19.968 1.024c3.584 0 8.704-0.512 14.336-2.048 32.256-6.656 45.056-10.752 63.488-25.6 1.536-1.536 4.096-4.608 6.144-7.68 4.096-5.632 9.216-12.8 16.896-18.432l18.432-12.288c4.096-1.536 12.288-4.096 15.872-4.608 6.656-1.024 59.904 0 66.048 0 24.064 0 38.912 2.048 50.176 8.192 12.8 6.656 21.504 15.872 29.696 24.064l154.624 151.04c6.144 6.656 12.288 12.288 18.432 17.92 7.168 6.656 14.336 13.312 20.48 20.48l5.632 5.632c8.704 8.704 19.456 18.944 25.6 36.352l1.536 6.656c0 2.048 0 4.608 0.512 6.656 4.096 28.16-11.776 47.616-17.408 55.296l-2.048 2.56-98.304 95.232c-12.8 14.848-30.72 34.816-57.856 39.936-22.016 4.096-38.912-1.536-51.712-9.216v283.136c0 31.744 0 62.976-0.512 94.72l-0.512 4.608c-3.584 16.384-13.312 32.768-26.112 42.496-20.48 15.36-47.616 16.384-71.168 16.384z m-358.4-48.64l358.4 0.512c9.728 0 32.768 0 41.472-6.656 2.56-2.048 6.144-7.168 7.68-11.776 0-30.208 0.512-60.928 0.512-91.648V462.848l31.232-21.504 26.624 25.6c12.8 12.288 20.48 18.944 33.792 16.384 10.752-2.048 20.992-13.824 30.208-24.064l3.072-3.584 96.256-93.696c5.632-7.68 7.68-12.288 6.656-17.92l-0.512-3.584v-2.56c-2.56-5.12-6.144-9.216-12.8-15.36l-6.656-6.656c-5.632-6.144-12.288-12.288-18.432-17.92-6.656-6.144-13.824-12.8-19.968-19.456L763.156 128.512c-6.144-6.144-12.288-12.288-17.92-15.36-0.512-0.512-6.144-2.56-27.136-2.56-6.144 0-12.288 0-18.432 0.512-6.144 0-11.776 0.512-16.896 0.512h-19.456c-3.072 1.024-5.12 1.024-7.168 1.536l-10.752 6.144c-1.536 1.536-3.584 4.608-6.144 7.168-3.584 5.12-8.192 11.264-15.36 16.896-26.624 20.992-47.616 28.16-84.48 35.328-13.312 2.56-24.576 3.584-33.792 2.048l-16.896-1.536c-20.48-3.584-37.376-7.68-53.76-14.336-14.336-6.144-33.792-17.92-45.568-32.768l-1.536-2.048c-4.608-6.144-8.704-10.752-12.8-14.336-1.024-0.512-3.072-1.024-4.608-1.536-2.048-1.024-4.096-1.536-6.656-2.56h-61.952l-14.336 1.024c-9.728 0.512-14.336 4.608-24.064 14.848l-29.696 29.184-136.192 133.12c-4.096 4.096-7.68 7.168-11.264 10.752L72.98 313.856c-14.336 12.8-21.504 19.456-23.552 32.256 0 2.048 2.56 7.168 3.072 9.216 2.56 6.144 6.656 10.24 13.824 16.384 2.56 2.048 4.608 4.096 7.168 6.656l6.656 7.168c5.12 5.12 9.728 10.24 15.36 14.848l2.048 1.536a386.31 386.31 0 0 0 20.48 20.48l48.64 47.104c3.584 3.584 6.656 7.168 10.24 9.216 5.12 3.584 15.872 7.168 22.016 4.608 9.216-3.584 16.384-10.752 24.576-19.456 4.096-4.096 19.456-21.504 19.456-21.504l34.816 20.48V875.52c0 9.216 0 19.456 1.536 24.064 1.536 3.584 6.144 9.216 10.24 11.776 6.144 4.096 24.064 4.096 30.208 4.096l19.968-0.512z"
                  ></path>
                </svg>`,
        },
        {
          name: '设置',
          angleOffset: 114,
          html: `<svg class="icon" viewBox="0 0 1094 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M551.782129 750.579012a233.655889 233.655889 0 1 1 235.699527-233.655889A234.337102 234.337102 0 0 1 551.782129 750.579012z m0-408.727503a177.115251 177.115251 0 1 0 180.521314 177.115251A178.477676 178.477676 0 0 0 551.782129 345.257572z"
                  ></path>
                  <path
                    d="M388.291128 1023.064014h-8.17455a558.594254 558.594254 0 0 1-204.363752-115.124913 25.886075 25.886075 0 0 1-8.855762-28.610926 204.363752 204.363752 0 0 0-24.52365-140.329776A204.363752 204.363752 0 0 0 30.654563 649.078349a35.42305 35.42305 0 0 1-19.755163-19.755163A863.096244 863.096244 0 0 1 0 514.198273a544.970004 544.970004 0 0 1 13.62425-115.124914 27.2485 27.2485 0 0 1 19.755163-19.755162 216.625577 216.625577 0 0 0 113.762488-89.920051 208.451027 208.451027 0 0 0 24.52365-141.010988 24.52365 24.52365 0 0 1 6.130913-30.654563A601.510642 601.510642 0 0 1 380.116578 1.245256a24.52365 24.52365 0 0 1 24.52365 6.812126A213.900727 213.900727 0 0 0 544.970004 58.467107a213.900727 213.900727 0 0 0 136.242501-50.409725 24.52365 24.52365 0 0 1 25.886075-6.812126 512.953016 512.953016 0 0 1 204.363752 115.124914 22.480013 22.480013 0 0 1 8.855762 25.204862 204.363752 204.363752 0 0 0 24.52365 140.329777 204.363752 204.363752 0 0 0 113.762489 89.92005 37.466688 37.466688 0 0 1 19.755162 19.755163 538.839091 538.839091 0 0 1 13.624251 115.806126 558.594254 558.594254 0 0 1-13.624251 115.124913 28.610925 28.610925 0 0 1-19.755162 19.755163 216.625577 216.625577 0 0 0-113.762489 89.92005 204.363752 204.363752 0 0 0-24.52365 140.329776 26.567288 26.567288 0 0 1-8.855762 25.204863 514.996654 514.996654 0 0 1-204.363752 115.806126 24.52365 24.52365 0 0 1-24.52365-6.130913 209.132239 209.132239 0 0 0-136.242501-50.409725 213.900727 213.900727 0 0 0-136.242501 50.409725 16.3491 16.3491 0 0 1-21.7988 15.667888zM544.970004 910.663951a272.485002 272.485002 0 0 1 160.766151 53.134575 485.704516 485.704516 0 0 0 158.041301-89.920051 239.786802 239.786802 0 0 1 33.379413-162.809788A272.485002 272.485002 0 0 1 1021.818758 601.393473a476.848754 476.848754 0 0 0 8.855762-87.1952A476.848754 476.848754 0 0 0 1021.818758 427.003072a272.485002 272.485002 0 0 1-127.386739-109.675213 242.511652 242.511652 0 0 1-33.379413-162.809789 487.066941 487.066941 0 0 0-156.678876-90.601263A266.354089 266.354089 0 0 1 544.970004 115.007745 267.035302 267.035302 0 0 1 382.841428 61.191957 497.966341 497.966341 0 0 0 224.800127 151.112008a240.468014 240.468014 0 0 1-33.379413 163.491001A272.485002 272.485002 0 0 1 64.033975 424.278222a416.220841 416.220841 0 0 0-8.855762 87.195201 425.757816 425.757816 0 0 0 8.855762 87.1952 272.485002 272.485002 0 0 1 127.386739 109.675214 258.179539 258.179539 0 0 1 33.379413 168.259488 476.848754 476.848754 0 0 0 158.041301 89.920051A261.585602 261.585602 0 0 1 544.970004 910.663951z"
                  ></path>
                </svg>`,
        },
        {
          name: '文件',
          angleOffset: 147,
          html: `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M912.486 452.041v0h-687.071c-25.518 0-47.091 16.669-54.521 39.729v0l-59.946 184.682v-510.65h286.299c0 63.238 51.229 114.467 114.471 114.467v0h286.236v114.469h57.229v-114.469c0-31.588-25.639-57.236-57.229-57.236h-286.304c-31.586 0-57.234-25.645-57.234-57.231v0c0-31.589-25.58-57.234-57.234-57.234v0h-286.236c-31.587 0-57.234 25.646-57.234 57.234v686.941c0 31.589 25.646 57.229 57.234 57.229h686.943c25.518 0 47.091-16.663 54.521-39.729h0.063l117.116-360.974c0.001-31.587-25.516-57.169-57.106-57.234v0zM800.864 852.747h-689.914l111.498-343.471h689.909l-111.494 343.471z"
                  ></path>
                </svg>`,
        },
      ],
    };
  },
  components: {},
  methods: {
    iconClick(index) {
      let { angleOffset } = this.list[index];
      this.$emit('iconIndexCilck', {
        index,
        angleOffset,
      });
    },
  },
};
</script>

<style scoped>
.small-tools-list {
  list-style: none;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  display: flex;
}
.tools-list-item {
  margin-right: 16px;
  width: 18px;
  height: 18px;
  color: #fff;
  fill: rgba(255, 255, 255, 0.6);
}
.tools-list-item:hover {
  fill: rgba(255, 255, 255, 1);
}
</style>
